$(function(){
	
	var dropbox = $('#dropbox');
		message = $('#uploadMessage', dropbox);
		url = $('#url').val();
		progress = $('#progress');
		
		progress.hide();
		
	
	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname:'pic',
		
		//allowedfiletypes: ['image/jpeg','image/png','image/gif'],   // filetypes allowed by Content-Type.  Empty array means no restrictions
		maxfiles: 5,
    	maxfilesize: 2,
		url: url,
		
		uploadFinished:function(i,file,response){
			// console.log(file);			progress.hide();
			if(response.err!='')
			{
				this.error(response.err,file);
				return;
			}
			$.data(file).addClass('done');
			// $.data(file).find('.name_pic').html(file.name +' caricato!');			$('#newFoto').attr('value',file.name);
			// response is the JSON object that post_file.php returns
		},
		
    	error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Your browser does not support HTML5 file uploads!');
					break;
				case 'TooManyFiles':
					alert('Puoi salvare al massimo '+maxfiles+'immagini!');
					break;
				case 'FileTooLarge':
					alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
					break;
				case 'FileNotAllowed':
					alert(file.name+' ha una estensione non valida.');
					break;
				default:
					break;
			}
		},
		 dragOver: function(e) {
   		 },
		
		// Called before each upload is started
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Only images are allowed!');
				// Returning false will cause the
				// file to be rejected
				return false;
			}
			if (!$("#uploadPermission").attr("value")=="1") {
				alert('Nessuna abilitazione per upload!');
				return false;				
			}
		},
		
		uploadStarted:function(i, file, len){
			progress.show();
			createImage(file);
		},
		
		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}
		
        	
    
    	 
	});
	
	var template = '<div class="preview">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span class="uploaded"></span>'+
						'</span>'+
						'<div class="progressHolder">'+
							'<div class="progress"></div>'+
							'<div class="name_pic"></div>'+
						'</div>'+
					'</div>'; 
	
	function createImage(file){
		//var preview = $(template), 
		var fotoContainer = $("#fotoContainer");
		image = $('img', fotoContainer);
		var reader = new FileReader();
		image.width = 200;
		image.height = 100;
		reader.onload = function(e){
			// e.target.result holds the DataURL which
			// can be used as a source of the image:
			image.attr('src',e.target.result);
		};
		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);
		// message.hide();
		// preview.appendTo(dropbox);		// Associating a preview container
		// with the file, using jQuery's $.data():
		$.data(file,fotoContainer);	}

	function showMessage(msg){
		message.html(msg);
	}

});